<template>
  <div>
    <div class="transport"
         id="printBox"
         v-for="(item, index) in pages"
         :key="index"
         height="800px"
         style="margin-bottom:60px;width:90%;margin-top:0px;">
      <el-form :model="form"
               height="120px">
        <el-row :gutter="10"
                class="printHeader">
          <el-col :span="24"
                  class=""
                  style="text-align: center;margin-bottom: 5px;">
            <div class="span2">
              <span class="detail-text"
                    style="font-weight:bold;font-size:18px;">上海菱顺物流有限公司运输业务承运单</span>
            </div>
          </el-col>
          <el-col :span="9"
                  class="left">
            <div class="span10">
              <label>合同编号:</label>
              <span class="detail-text">{{ form.pactCode }}</span>
            </div>
            <div class="span10">
              <label>发货单位:</label>
              <span class="detail-text">上海发那科机器人有限公司</span>
            </div>
          </el-col>
          <el-col :span="7"
                  class="left">
            <div class="span10">
              <label>订单编号:</label>
              <span class="detail-text">{{ form.code }}</span>
            </div>
            <div class="span10">
              <label>发货联系人:</label>
              <span class="detail-text">王奇光</span>
            </div>
          </el-col>
          <el-col :span="8"
                  class="left">
            <div class="span10">
              <label>托运日期:</label>
              <span class="detail-text">{{ form.fromTime }}</span>
            </div>
            <div class="span10">
              <label> 联系电话:</label>
              <span class="detail-text">021-50327700</span>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <table class="transport_table commoditytable"
             border="1"
             cellspacing="0"
             cellpadding="0"
             height="200px"
             style="margin: 5px 0;">
        <thead>
          <tr>
            <th style="width:30%;">
              <div class="cell">货物名称</div>
            </th>
            <th style="width:10%;">
              <div class="cell">件数</div>
            </th>
            <th style="width:20%;">
              <div class="cell">体积（长*宽*高）</div>
            </th>
            <th style="width:40%;">
              <div class="cell">货物编号</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(items, indexs) in goodArr[index]"
              :key="indexs">
            <td align="center">{{ items.name }}</td>
            <td align="center">{{ items.goodsLstQty }}</td>
            <td align="center"></td>
            <td align="center"></td>
          </tr>
          <tr class="partSum">
            <td align="center">本页小计：</td>
            <td align="center"
                class="partsum">{{ litleTotal[index] }}</td>
            <td></td>
            <td></td>
          </tr>
          <tr class="TotalSum">
            <td align="center">合&nbsp;&nbsp;&nbsp;计：</td>
            <td align="center"
                class="totalsum">{{ qtySum }}</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <el-form :model="form"
               height="200px">
        <el-row :gutter="10"
                class="printHeader">
          <el-col :span="10"
                  class="left">
            <div class="span10">
              <label>运输方式:</label>
              <span class="detail-text">{{ form.transportMode }}</span>
            </div>
            <div class="span10">
              <label>发货地址:</label>
              <span class="detail-text">
                <!-- {{routeType === "CustomerOrderCost"
                    ? $tools.areaFilter(
                        form.fromProvince,
                        form.fromCity,
                        form.fromDistrict
                      )
                    : $tools.areaFilter(
                        form.fromProvince1,
                        form.fromCity1,
                        form.fromDistrict1
                      )
                }}{{ form.from }} -->
                {{form.area}}{{ form.from }}
              </span>
            </div>
            <div class="span10">
              <label>要求到货时间:</label>
              <span class="detail-text">{{ form.toTime }}</span>
            </div>
            <div class="span10">
              <label>服务要求:</label>
              <span class="detail-text">_________________________________</span>
            </div>
            <div class="span10">
              <label>收货人签名:</label>
              <span class="detail-text">_______________________________</span>
            </div>
          </el-col>
          <el-col :span="9"
                  class="left rightClass">
            <div class="span10">
              <label>周六、周日:</label>&nbsp;
              <span class="checkBox"></span>&nbsp;可以&nbsp;&nbsp;&nbsp;
              <span class="checkBox"></span>&nbsp;不可以
            </div>
            <div class="span10">
              <label>收货人单位:</label>
              <span class="detail-text">{{ form.endUserName }}</span>
            </div>
            <div class="span10">
              <label>收货人姓名:</label>
              <span class="detail-text">{{ form.toMan }}</span>
            </div>
            <div class="span10">
              <label> 收货人电话:</label>
              <span class="detail-text">{{ form.toContact }}</span>
            </div>
            <div class="span10">
              <label>收货人地址:</label>
              <span class="detail-text">
                <!-- {{
                  $tools.areaFilter(
                    form.toProvince1,
                    form.toCity1,
                    form.toDistrict1
                  )
                }}{{ form.to }} -->
                {{form.toArea}}{{form.to}}
              </span>
            </div>
          </el-col>
          <el-col :span="8"
                  class="left bottomBoundary">
            <div class="span10">
              <label>收货日期:</label>
              <span class="detail-text">_________________</span>
            </div>
          </el-col>
          <el-col :span="8"
                  class="left bottomBoundary">
            <div class="span10">
              <label>托运单位经办人:</label>
              <span class="detail-text">_________________</span>
            </div>
          </el-col>
          <el-col :span="7"
                  class="left bottomBoundary">
            <div class="span10">
              <label>现场监管员:</label>
              <span class="detail-text">________________</span>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="rightTips">
        第一联回单︵<br />白<br />︶ 第二联收货方︵<br />蓝<br />︶
        第三联承运单位︵<br />红<br />︶ 第四联客户︵<br />绿<br />︶
        第五联存根︵<br />黄<br />︶
      </div>
      <div class="pagecode"
           style="right:0;"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LingshunPrint",
  props: {
    routeType: String
  },
  data () {
    return {
      form: {
        pactCode: "13425-DLZY",
        code: "0013506",
        fromTime: "2018年8月6日",
        transportMode: "零担",
        area: "上海市",
        from: "富联路1500号",
        toTime: "2018年8月11日",
        endUserName: "四川明匠智能系统有限公司",
        toMan: "孙明",
        toContact: "13585474251",
        toArea: "四川省成都市龙泉驿区",
        to: "经开区汽车大道668号工厂内",

      },
      pages: 1,
      goodArr: [
        [{ name: "M-10A/12", goodsLstQty: "1" },
        { name: "焊机", goodsLstQty: "1" },
        { name: "R-2000C/165F", goodsLstQty: "1" },
        { name: "焊机", goodsLstQty: "1" }]
      ],
      litleTotal: [4],
      qtySum: 4,
      url: null,
      requestData: {},
      isDetail:
        this.$route.query.isDetail && JSON.parse(this.$route.query.isDetail)
          ? true
          : false
    };
  },
  mounted () {
    this.print();
    // if (this.isDetail) {
    //   this.form = JSON.parse(this.$route.query.obj);
    //   this.form.goodsList.forEach((res, index) => {
    //     if (res.qty) res.goodsLstQty = res.qty;
    //   });
    //   this.appendPages(this.form.goodsList);
    // } else {
    //   this.loadData();
    // }
    // let toTime = this.$tools.formatData(this.form.toTime, "-", true, true);
    // let fromTime = this.$tools.formatData(this.form.fromTime, "-", true, true);
    // this.form.toTime = toTime
    //   ? toTime.split("-")[0] +
    //   "年" +
    //   toTime.split("-")[1] +
    //   "月" +
    //   toTime.split("-")[2] +
    //   "日"
    //   : "";
    // this.form.fromTime = fromTime
    //   ? fromTime.split("-")[0] +
    //   "年" +
    //   fromTime.split("-")[1] +
    //   "月" +
    //   fromTime.split("-")[2] +
    //   "日"
    //   : "";
  },
  methods: {
    loadData () {
      this.url = `/tms/orderDetails/transport`;
      this.requestData = {
        id: parseInt(this.$route.params.id),
        type: parseInt(this.$route.params.code)
      };
      this.$http.post(this.url, this.requestData).then(res => {
        if (res.data.code === 0) {
          this.form = Object.assign(
            {},
            res.data.data.transportOrderInfo ||
            res.data.data.mergeOrder ||
            res.data.data.order ||
            res.data.data.orderDetails
          ); // orderDetails为报价系统数据校验整体数据
          this.form.goodsList = res.data.data.goodsList;
          this.appendPages(this.form.goodsList);
          this.print();
        }
      });
    },
    appendPages (goodsList) {
      const goodsNum = this.isDetail ? goodsList.length - 2 : goodsList.length;
      this.pages = goodsNum % 4 == 0 ? goodsNum / 4 : Math.ceil(goodsNum / 4);
      let subArrayNum = 4;
      this.goodArr = new Array(Math.ceil(goodsList.length / subArrayNum));
      for (let i = 0; i < this.goodArr.length; i++) {
        this.goodArr[i] = new Array();
      }
      for (let i = 0; i < goodsList.length; i++) {
        this.goodArr[parseInt(i / subArrayNum)][i % subArrayNum] = goodsList[i];
      }
      for (let a = 0; a < this.goodArr.length; a++) {
        let aaa = 0;
        for (let b = 0; b < this.goodArr[a].length; b++) {
          aaa += this.goodArr[a][b].goodsLstQty;
        }
        this.litleTotal.push(aaa);
      }
      //计算合计
      for (let a = 0; a < goodsList.length; a++) {
        this.qtySum += goodsList[a].goodsLstQty;
      }
    },
    print () {
      setTimeout(() => {
        if (window.document.execCommand("print")) window.close();
        window.print();
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
#printBox {
  transform: scale(0.95);
}
// @media screen {
@media print {
  // @page {
  //   size: A5 landscape;
  // }
  .transport {
    page-break-after: always;
    width: 96%;
    padding: 0px 10px;
    margin: 0 auto;
    box-sizing: border-box;
    height: 90%;
    .detail-row label {
      font-size: 12px;
    }
    .transport_title {
      text-align: center;
      font-size: 12px;
      color: var(--prev-color-text-lightgrey);
    }
    .transport_data {
      margin-bottom: 20px;
      font-size: 12px;
    }
    .transport_table {
      // margin-left:-15px;
      // transform:scale(0.9);
      width: 98%;
      font-size: 14px;
      table-layout: fixed;
      border-collapse: collapse;
      margin-top: 5px;
      margin-bottom: 5px;
      border: none;
      thead {
        line-height: 30px;
        border: 1px solid gray;
        word-wrap: break-word;
        word-break: break-word;
      }
      td {
        border: 1px solid gray;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 20px;
        line-height: 20px;
        text-align: center;
        word-break: break-word;
      }
    }
    .span4 {
      float: left;
      font-size: 12px;
      margin: 5px 0;
      width: 25%;
      .detail-text {
        font-size: 12px;
      }
    }
  }
  .printHeader {
    .rightClass {
      margin-left: 50px;
    }
    .checkBox {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1px solid gray;
    }
    .printPic {
      background-size: cover;
      height: 100%;
      display: block;
      margin-bottom: 15px;
    }
    .printLogo {
      width: 50%;
    }
    .printQR {
      width: 20%;
    }
    // .left,
    // .right,
    // .center {
    //   // margin-bottom: 10px;
    // }
    // .bottomBoundary {
    //   margin-top: 10px;
    // }
    .center {
      text-align: center;
      margin-top: 5px;
    }
    .right {
      img {
        float: right;
      }
      div {
        width: 100%;
        float: right;
        text-align: right;
      }
    }
    .span10 {
      // transform:scale(0.9);
      line-height: 20px;
      font-size: 12px;
      margin: 0;
      clear: both;
    }
  }
  .precautions {
    margin: 10px 0 20px;
    overflow: hidden;
    label,
    span {
      float: left;
      line-height: 25px;
      font-size: 12px;
    }
  }
  .pageFooter {
    text-align: center;
    width: 100%;
  }
  .sign {
    font-size: 12px;
    .sign-text {
      border-bottom: 1px solid gray;
      display: inline-block;
      width: 50%;
    }
  }
  .detail-row .span3,
  .detail-row .span5 {
    font-size: 12px;
  }
}
.orders {
  position: relative;
}
.splitPages {
  page-break-after: always;
}
.rightTips {
  position: absolute;
  right: 0;
  top: -50px;
  width: 20px;
  transform: scale(0.7);
  -webkit-transform: scale(0.8);
  text-align: center;
  font-size: 9px;
}
@media screen {
  .transport {
    display: none;
  }
}
</style>
